<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page isELIgnored="false" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>弹出框</title>
<link href="${ctx}/style/adminUI/css/reset.css" rel="stylesheet" type="text/css"/>

	<!-- BEGIN GLOBAL MANDATORY STYLES -->          
	<link href="${ctx}/style/adminUI/${ctx}/style/adminUI/assets/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
	<link href="${ctx}/style/adminUI/assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
	<link href="${ctx}/style/adminUI/assets/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css"/>
	<!-- END GLOBAL MANDATORY STYLES -->
	<!-- BEGIN THEME STYLES --> 
	<link href="${ctx}/style/adminUI/assets/css/style-metronic.css" rel="stylesheet" type="text/css"/>
	<link href="${ctx}/style/adminUI/assets/css/style.css" rel="stylesheet" type="text/css"/>
	<link href="${ctx}/style/adminUI/assets/css/style-responsive.css" rel="stylesheet" type="text/css"/>
	<link href="${ctx}/style/adminUI/assets/css/plugins.css" rel="stylesheet" type="text/css"/>
<%-- 	<link href="${ctx}/style/adminUI/assets/css/themes/default.css" rel="stylesheet" type="text/css" id="style_color"/> --%>
	<link href="${ctx}/style/adminUI/assets/css/custom.css" rel="stylesheet" type="text/css"/>
	<!-- END THEME STYLES -->
	<link rel="shortcut icon" href="favicon.ico" />
</head>

<body>
<div class="row">
				<div class="col-md-12">
					<div class="note note-success">
						<h4 class="block">Bootstrap Native Modals</h4>
						<p>
							Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.
							If you need more control over the Bootstrap Modals please check out <a href="ui_extended_modals.html">extended modals</a>.
						</p>
					</div>
					<!-- BEGIN PORTLET-->   
					<div class="portlet box blue">
						<div class="portlet-title">
							<div class="caption"><i class="fa fa-reorder"></i>Static Example</div>
							<div class="tools">
								<a href="javascript:;" class="collapse"></a>
								<a href="javascript:;" class="reload"></a>
							</div>
						</div>
						<div class="portlet-body">
							<table class="table table-hover table-striped table-bordered">
								<tr>
									<td>Basic Example</td>
									<td><a class="btn default" data-toggle="modal" href="#basic">View Demo</a></td>
								</tr>
								<tr>
									<td>Wide Width Example</td>
									<td><a class="btn default" data-toggle="modal" href="#wide">View Demo</a></td>
								</tr>
								<tr>
									<td>Full Width Example</td>
									<td><a class="btn default" data-toggle="modal" href="#full">View Demo</a></td>
								</tr>
								<tr>
									<td>Responsive</td>
									<td><a class="btn default" data-toggle="modal" href="#responsive">View Demo</a></td>
								</tr>
								<tr>
									<td>AJAX content loading</td>
									<td><a class=" btn default" href="ui_modals_ajax_sample.html" data-target="#ajax" data-toggle="modal">View Demo</a></td>
								</tr>
								<tr>
									<td>Stackable</td>
									<td><a class=" btn default" data-target="#stack1" data-toggle="modal">View Demo</a></td>
								</tr>
								<tr>
									<td>Static Background</td>
									<td><a class=" btn default" data-toggle="modal" href="#static">View Demo</a></td>
								</tr>
								<tr>
									<td>Long Modals</td>
									<td><a class=" btn default" data-toggle="modal" href="#long">View Demo</a></td>
								</tr>
							</table>
							<div class="modal fade" id="basic" tabindex="-1" role="basic" aria-hidden="true">
								<div class="modal-dialog">
									<div class="modal-content">
										<div class="modal-header">
											<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
											<h4 class="modal-title">Modal Title</h4>
										</div>
										<div class="modal-body">
											Modal body goes here
										</div>
										<div class="modal-footer">
											<button type="button" class="btn default" data-dismiss="modal">Close</button>
											<button type="button" class="btn blue">Save changes</button>
										</div>
									</div>
									<!-- /.modal-content -->
								</div>
								<!-- /.modal-dialog -->
							</div>
							<!-- /.modal -->
							<div class="modal fade" id="full" tabindex="-1" role="basic" aria-hidden="true">
								<div class="modal-dialog modal-full">
									<div class="modal-content">
										<div class="modal-header">
											<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
											<h4 class="modal-title">Modal Title</h4>
										</div>
										<div class="modal-body">
											Modal body goes here
										</div>
										<div class="modal-footer">
											<button type="button" class="btn default" data-dismiss="modal">Close</button>
											<button type="button" class="btn blue">Save changes</button>
										</div>
									</div>
									<!-- /.modal-content -->
								</div>
								<!-- /.modal-dialog -->
							</div>
							<!-- /.modal -->
							<div class="modal fade" id="wide" tabindex="-1" role="basic" aria-hidden="true">
								<div class="modal-dialog modal-wide">
									<div class="modal-content">
										<div class="modal-header">
											<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
											<h4 class="modal-title">Modal Title</h4>
										</div>
										<div class="modal-body">
											Modal body goes here
										</div>
										<div class="modal-footer">
											<button type="button" class="btn default" data-dismiss="modal">Close</button>
											<button type="button" class="btn blue">Save changes</button>
										</div>
									</div>
									<!-- /.modal-content -->
								</div>
								<!-- /.modal-dialog -->
							</div>
							<!-- /.modal -->
							<div id="responsive" class="modal fade" tabindex="-1" aria-hidden="true">
								<div class="modal-dialog">
									<div class="modal-content">
										<div class="modal-header">
											<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
											<h4 class="modal-title">Responsive & Scrollable</h4>
										</div>
										<div class="modal-body">
											<div class="scroller" style="height:300px" data-always-visible="1" data-rail-visible1="1">
												<div class="row">
													<div class="col-md-6">
														<h4>Some Input</h4>
														<p><input type="text" class="col-md-12 form-control"></p>
														<p><input type="text" class="col-md-12 form-control"></p>
														<p><input type="text" class="col-md-12 form-control"></p>
														<p><input type="text" class="col-md-12 form-control"></p>
														<p><input type="text" class="col-md-12 form-control"></p>
														<p><input type="text" class="col-md-12 form-control"></p>
														<p><input type="text" class="col-md-12 form-control"></p>
													</div>
													<div class="col-md-6">
														<h4>Some More Input</h4>
														<p><input type="text" class="col-md-12 form-control"></p>
														<p><input type="text" class="col-md-12 form-control"></p>
														<p><input type="text" class="col-md-12 form-control"></p>
														<p><input type="text" class="col-md-12 form-control"></p>
														<p><input type="text" class="col-md-12 form-control"></p>
														<p><input type="text" class="col-md-12 form-control"></p>
														<p><input type="text" class="col-md-12 form-control"></p>
													</div>
												</div>
											</div>
										</div>
										<div class="modal-footer">
											<button type="button" data-dismiss="modal" class="btn default">Close</button>
											<button type="button" class="btn green">Save changes</button>
										</div>
									</div>
								</div>
							</div>
							<div class="modal fade" id="ajax" tabindex="-1" role="basic" aria-hidden="true">
								<img src="assets/img/ajax-modal-loading.gif" alt="" class="loading">
							</div>
							<!-- /.modal -->
							<div id="stack1" class="modal fade" tabindex="-1" data-width="400">
								<div class="modal-dialog">
									<div class="modal-content">
										<div class="modal-header">
											<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
											<h4 class="modal-title">Stack One</h4>
										</div>
										<div class="modal-body">
											<div class="row">
												<div class="col-md-12">
													<h4>Some Input</h4>
													<p><input type="text" class="col-md-12 form-control"></p>
													<p><input type="text" class="col-md-12 form-control"></p>
													<p><input type="text" class="col-md-12 form-control"></p>
													<p><input type="text" class="col-md-12 form-control"></p>
												</div>
											</div>
											<a class="btn green" data-toggle="modal" href="#stack2">Launch modal</a>
										</div>
										<div class="modal-footer">
											<button type="button" data-dismiss="modal" class="btn">Close</button>
											<button type="button" class="btn red">Ok</button>
										</div>
									</div>
								</div>
							</div>
							<div id="stack2" class="modal fade" tabindex="-1">
								<div class="modal-dialog">
									<div class="modal-content">
										<div class="modal-header">
											<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
											<h4 class="modal-title">Stack Two</h4>
										</div>
										<div class="modal-body">
											<div class="row">
												<div class="col-md-12">
													<h4>Some Input</h4>
													<p><input type="text" class="col-md-12 form-control"></p>
													<p><input type="text" class="col-md-12 form-control"></p>
													<p><input type="text" class="col-md-12 form-control"></p>
													<p><input type="text" class="col-md-12 form-control"></p>
												</div>
											</div>
										</div>
										<div class="modal-footer">
											<button type="button" data-dismiss="modal" class="btn">Close</button>
											<button type="button" class="btn yellow">Ok</button>
										</div>
									</div>
								</div>
							</div>
							<div id="static" class="modal fade" tabindex="-1" data-backdrop="static" data-keyboard="false">
								<div class="modal-dialog">
									<div class="modal-content">
										<div class="modal-header">
											<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
											<h4 class="modal-title">Confirmation</h4>
										</div>
										<div class="modal-body">
											<p>Would you like to continue with some arbitrary task?</p>
										</div>
										<div class="modal-footer">
											<button type="button" data-dismiss="modal" class="btn default">Cancel</button>
											<button type="button" data-dismiss="modal" class="btn green">Continue Task</button>
										</div>
									</div>
								</div>
							</div>
							<div id="long" class="modal fade modal-scroll" tabindex="-1" data-replace="true">
								<div class="modal-dialog">
									<div class="modal-content">
										<div class="modal-header">
											<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
											<h4 class="modal-title">A Fairly Long Modal</h4>
										</div>
										<div class="modal-body">
											<img style="height: 800px" alt="" src="http://i.imgur.com/KwPYo.jpg">
										</div>
										<div class="modal-footer">
											<button type="button" data-dismiss="modal" class="btn">Close</button>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- END PORTLET-->
				</div>
			</div>
			<!-- END PAGE CONTENT--> 

	<!-- END FOOTER -->
	<!-- BEGIN JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) -->
	<!-- BEGIN CORE PLUGINS -->   
	<!--[if lt IE 9]>
	<script src="${ctx}/style/adminUI/assets/plugins/respond.min.js"></script>
	<script src="${ctx}/style/adminUI/assets/plugins/excanvas.min.js"></script> 
	<![endif]-->   
	<script src="${ctx}/style/adminUI/assets/plugins/jquery-1.10.2.min.js" type="text/javascript"></script>
	<script src="${ctx}/style/adminUI/assets/plugins/jquery-migrate-1.2.1.min.js" type="text/javascript"></script> 
	<script src="${ctx}/style/adminUI/assets/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
	<script src="${ctx}/style/adminUI/assets/plugins/bootstrap-hover-dropdown/twitter-bootstrap-hover-dropdown.min.js" type="text/javascript" ></script>
	<script src="${ctx}/style/adminUI/assets/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
	<script src="${ctx}/style/adminUI/assets/plugins/jquery.blockui.min.js" type="text/javascript"></script>  
	<script src="${ctx}/style/adminUI/assets/plugins/jquery.cookie.min.js" type="text/javascript"></script>
	<script src="${ctx}/style/adminUI/assets/plugins/uniform/jquery.uniform.min.js" type="text/javascript" ></script>
	<!-- END CORE PLUGINS -->
	<!-- BEGIN PAGE LEVEL SCRIPTS -->
	<script src="${ctx}/style/adminUI/assets/scripts/app.js"></script> 
	<!-- END PAGE LEVEL SCRIPTS -->
	<script>
		jQuery(document).ready(function() {       
		   // initiate layout and plugins
		   App.init();
		});
	</script>
	<!-- END JAVASCRIPTS -->   
</body>
<!-- END BODY -->
</html>
